<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>

		<style>
			html,
			body {
				background-color: transparent;
			}
			
			.icon {
				width: 1024px;
				height: 1024px;
				border-radius: 512px;
				background: linear-gradient(to right, rgba(255, 102, 51, 1) 0%, rgba(255, 0, 51, 1) 100%);
				box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.75);
				text-align: center;
				display: flex;
				justify-content: center;
				flex-direction: column;
				align-items: center;
				color: white;
				font-size: 600px;
			}
			
			.quan {
				font: Brush Script MT;
				text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, .1), 0 0 5px rgba(0, 0, 0, .1), 0 1px 3px rgba(0, 0, 0, .3), 0 3px 5px rgba(0, 0, 0, .2), 0 5px 10px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .2), 0 20px 20px rgba(0, 0, 0, .15);
				margin: 0 0 30px 30px;
			}
		</style>
	</head>

	<body>

		<div class="icon" id="icon">
			<div class="quan">券</div>

		</div>
	</body>

	<script type="text/javascript" src="../js/html2canvas.min.js"></script>

	<script>
		html2canvas(document.querySelector("#icon")).then(canvas => {
			document.body.appendChild(canvas)
		});
	</script>

</html>
